<%@ page import="java.util.List" %>
<%@ page import="code.entity.Location" %>
<%@ page import="code.service.LocationService" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%  List<Location> list = new ArrayList<Location>();
    try {
        String date = request.getParameter("date");

        if (date != null && date.length() > 0) {
            list = LocationService.getLocationList(date);
        }
    } catch (Exception e) {
        e.printStackTrace();
    }

%>
<html>
<head>
    <link rel=stylesheet type=text/css href="ui/css/layout.css"/>
    <script type="text/javascript" src="ui/js/jquery.js"></script>
    <script type="text/javascript" src="ui/js/layout.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        var map;
        function initialize() {
            <%if(list!=null&&list.size()>0){%>
            var latlng = new google.maps.LatLng(<%=list.get(0).getLat()%>,<%=list.get(0).getLng()%>);
            <%}else{%>
            var latlng = new google.maps.LatLng(39.907,116.387);
            <%}%>
            var myOptions = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var coordinates = [
                <%
                   for(int i=0;i<list.size();i++){
                     Location l=list.get(i);

                %>
                new google.maps.LatLng(<%=l.getLat()%>, <%=l.getLng()%>)<%=i==list.size()-1?"":","%>
                <%}%>
            ];

            var polyline = new google.maps.Polyline({
                        path:coordinates ,
                        strokeColor: "#ff0000",
                        strokeWeight:3
                    });


            polyline.setMap(map);
        }

        var mymarker = [];
        var counter = 1;
        function locasOnClick(lng, lat) {
            if (typeof( mymarker[counter - 1]) == "undefined") {

            } else {
                mymarker[counter - 1].setMap(null);
                mymarker[counter - 1] = null;
            }

            var image = 'images/dot.gif';
            var myLatLng = new google.maps.LatLng(lng, lat);

            var tmpmarker = new google.maps.Marker({       position: myLatLng,       map: map,       icon: image   });
            mymarker[counter] = tmpmarker;
            counter++;
        }

    </script>
</head>
<body onload="initialize()">
<table height="100%" width="100%" border="0" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>

        <td id="data_list">
            <form action="index.jsp" method="post">
                手机：<input name="phone" value="" maxlength="11" style="width:140px"/>
                日期：<input name="date" value="" maxlength="10" style="width:140px"/>
                <input type="submit" value="查询">
            </form>
                <%
                   for(int i=0;i<list.size();i++){
                     Location l=list.get(i);

                %>
                <p><a href="javascript:void(0);"
                      onclick="locasOnClick('<%=l.getLat()%>','<%=l.getLng()%>');"><%=l.getCreateTime()%></a></p>
                <%}%>
        </td>
        <td id="side_bar" onclick="sidebarOnclick();" title=""></td>

        <td id="data_map">
            <div id="map_canvas" style="width:100%; height:100%"></div>
            &nbsp;

        </td>
    </tr>
    </tbody>
</table>
</body>
</html>